<template>
	<view class="logincontainner">
		<view class="userImg">
			<uv-image src="/static/user.jpg" shape="circle" width="80px" height="80px"></uv-image>
		</view>
		<uv-form labelWidth="70" labelPosition="left" :model="userInfo" :rules="rules" ref="formRef">
			<uv-form-item label="班级:" prop="className" borderBottom @click="showSexSelect">
				<uv-input v-model="userInfo.className" disabled disabledColor="#ffffff" placeholder="请选择班级"
					border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="学号:" prop="stuNum" borderBottom>
				<uv-input placeholder="请输入账号" v-model="userInfo.stuNum" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="密码:" prop="password" borderBottom>
				<uv-input type='password' placeholder="请输入密码" v-model="userInfo.password" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="确定密码:" prop="confirm" borderBottom>
				<uv-input type='password' placeholder="请输入密码" v-model="userInfo.confirm" border="none">
				</uv-input>
			</uv-form-item>
		</uv-form>
		<uv-action-sheet ref="selectRef" :actions="actions" title="请选择班级" @select="sexSelect">
		</uv-action-sheet>
		<view class="loginBtn">
			<uv-button color="#6ECEB0" type="primary" text="注册" customStyle="margin-top: 10px" @click="registerBtn">
			</uv-button>
			<uv-button color="#6ECEB0" type="primary" text="去登录" customStyle="margin-top: 30px" @click="tologin">
			</uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onReady
	} from '@dcloudio/uni-app'
	import {
		getClassesListApi,
		registerApi
	} from '../../api/index.js'
	//班级下拉数据
	const actions = ref([])
	//表单ref属性
	const formRef = ref()
	const selectRef = ref()
	//表单绑定的对象
	const userInfo = reactive({
		stuNum: '',
		password: '',
		confirm: '',
		classId: '',
		className:''
	})
	//表单验证规则
	const rules = reactive({
		'className': {
			type: 'string',
			required: true,
			message: '请选择班级',
			trigger: ['blur', 'change']
		},
		'stuNum': {
			type: 'string',
			required: true,
			message: '请输入账号',
			trigger: ['blur', 'change']
		},
		'password': {
			type: 'string',
			required: true,
			message: '请输入密码',
			trigger: ['blur', 'change']
		},
		confirm: [{
			required: true,
			message: '请输入确定密码',
			// blur和change事件触发检验
			trigger: ['blur', 'change']
		}, {
			// 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
			validator: (rule, value, callback) => {
				console.log(value)
				if(value != userInfo.password){
					return false;
				}
				// 此处业务逻辑省略
				// 返回true表校验通过，返回false表示不通过
				return true;
			},
			message: '密码和确定密码不一致',
			trigger: ['blur']
		}]
	})
	//登录
	const registerBtn = () => {
		console.log(userInfo)
		formRef.value.validate().then(async (res) => {
			let result = await registerApi(userInfo)
			if(result && result.code == 200){
				uni.navigateTo({
					url:'../login/login'
				})
			}
		})
	}
	//去注册
	const tologin = () => {
		uni.navigateTo({
			url: '../login/login'
		})
	}
	//班级点击
	const showSexSelect = () => {
		selectRef.value.open();
		hideKeyboard()
	}
	const hideKeyboard = () => {
		uni.hideKeyboard()
	}
	const sexSelect = (e) => {
		console.log(e)
		userInfo.classId = e.classId;
		userInfo.className = e.name;
	}
	const getClassesList = async () => {
		let res = await getClassesListApi()
		if (res && res.code == 200) {
			console.log(res)
			actions.value = res.data;
		}
	}
	onReady(() => {
		formRef.value.setRules(rules);
		getClassesList()
	})
</script>

<style>
	page {
		background-color: #FFF;
	}
</style>
<style scoped lang="scss">
	.logincontainner {
		padding: 30px 50rpx;

		.userImg {
			padding: 30px 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.loginBtn {
			margin-top: 50px;
		}
	}
</style>
